<template>
  <div>
    <table width="90%" class="table">
      <caption>
        <h2 class="my_table_title">借阅记录{{userId}}</h2>
      </caption>
      <thead>
      <tr>
        <th>
          序号
        </th>
        <th>
          书名
        </th>
        <th>
          借阅日期
        </th>
        <th>
          应还日期
        </th>
        <th>
          还书日期
        </th>
        <th>
          状态
        </th>
      </tr>
      </thead>
      <tr v-for="(item,index) in tableData" :class="{aaa: item[0].state >= 3}">
        <td>
          {{index*1+1}}
        </td>
        <td>
          {{item[1]}}
        </td>
        <td>
          {{item[0].borrowingData.slice(0,10)}}
        </td>
        <td>
          {{item[0].shouldReturnDate.slice(0,10)}}
        </td>
        <td>
          {{item[0].returnData === null ? "---":item[0].returnData.slice(0,10)}}
        </td>
        <td :class="{bbb: state(item[0].state) >= 3}">
          {{state(item[0].state)}}
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
  import {apiByIdBorrowing} from "../request/api"

  export default {
    name: "Borrowing",
    props: {
      userId: ''
    },
    data() {
      return {
        tableData: [],
      }
    },
    created() {
      this.initbor()
    },
    activated() {
      this.initbor()
    },
    methods: {
      initbor(){
        apiByIdBorrowing({userId:this.userId}).then(res => {
          this.tableData = res.data.Borrowing
          console.log(res)
        })
      },
      state: x => {
        if (x === 0)
          return '待取书'
        if (x === 1)
          return '已借阅'
        if (x === 2)
          return '按时归还'
        if (x === 3)
          return '超时归还'
        if (x === 4)
          return '未归还'
        return '错误'
      }

    },
    computed:{

    }
  }
</script>

<style scoped>
  .my_table_title {
    margin-bottom: 20px;
    font-size: 40px;
    line-height: 60px;
    font-family: 华文仿宋;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
  }

  /*表格样式*/
  table
  {
    border-collapse: collapse;
    margin: 0 auto;
    text-align: center;
  }
  table td, table th
  {
    border: 1px solid #cad9ea;
    color: #666;
    height: 30px;
  }
  table thead th
  {
    background-color: #CCE8EB;
  }
  .aaa {
    background-color: #ffcfd7;
  }
  .bbb {
    color: #fa0000;
  }
</style>
